<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="/static/component/layui/css/layui.css" media="all">
    <th:block th:include="include :: header('支付表')"/>
</head>
<body>
<form class="layui-form" action=""  th:object="${Orderlist}">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">

                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">订单号：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" id="payId" name="id" autocomplete="off" class="layui-input">
                    </div>
                </div> -->

                <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">支付单号：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" id="pId" name="pId" autocomplete="off" class="layui-input">
                    </div>
                </div>

                   <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">支付时间：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" id="time" name="pTime" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                <label class="layui-form-label">订单状态：</label>
                <div class="layui-input-block">
                    <input type="text" id="state" name="oState" autocomplete="off" class="layui-input">
                </div>
            </div>

                <!-- 被隐藏 -->
                <div class="layui-form-item layui-hide">
                <label class="layui-form-label">收银员：</label>
                <div class="layui-input-block">
                    <input disabled="disabled" type="text" id="checker" name="oCashier" autocomplete="off" class="layui-input">
                </div>
            </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">预约单号：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" th:value="*{id}"  name="reserId" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">顾客姓名：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" th:value="*{customerName}" type="text" name="cusName" autocomplete="off" placeholder="顾客姓名" class="layui-input">
                    </div>
                </div>

                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">顾客电话：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" th:value="*{customerTel}" type="text" name="customerTel" autocomplete="off" placeholder="顾客联系方式" class="layui-input">
                    </div>
                </div> -->


                <div class="layui-form-item">
                    <label class="layui-form-label">预约项目：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" type="text" autocomplete="预约项目" th:value="*{oProj}" name="serItem" class="layui-input" id="object">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">发型师姓名：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" th:value="*{hName}" type="text" name="hName" autocomplete="发型师姓名" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">应付金额(元)：</label>
                    <div class="layui-input-block">
                        <input disabled="disabled" id="amount" type="text" name="amPayable" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">实付金额(元)：</label>
                    <div class="layui-input-block">
                        <input type="text" name="acPaid" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">支付方式：</label>
                    <div class="layui-input-block">
                        <select name="pMethod"  lay-verify="" lay-filter="way" >
                                <option value="现金支付">现金支付</option>
                                <option value="会员卡支付">会员卡支付</option>
                                <option value="支付宝支付">支付宝支付</option>
                                <option value="微信支付">微信支付</option>
                                <option value="银行卡支付">银行卡支付</option>
                        </select>
                    </div>
                </div>

                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">会员卡号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="cardId" class="layui-input">                       
                    </div>
                </div> -->


                <div class="layui-form-item">
                    <label class="layui-form-label">备注：</label>
                    <div class="layui-input-block">
                        <input type="text" name="reMark" class="layui-input">                       
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit=""
                    lay-filter="orderlist-update">
                <i class="layui-icon layui-icon-ok"></i>
                确认
            </button>

            <button id="cancel" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-close"></i>
                取消
            </button>
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>

<script src="/static/component/layui/layui.js"></script>
<script>

    let money = new Array();//存贮应付金额
    let total=0;//应付金额

    // var tex = "";
    //  for(var i = 1;i <= 6;i++){
    //      const num = Math.floor(Math.random()*10);
    //      tex += num;
    //  }
    var tex2 = "";
        for(var i = 1;i <= 6;i++){
            const num = Math.floor(Math.random()*10);
                    tex2 += num;
    }//随机生成支付ID

    let state="订单完成";  
    let checker = 002;//固定当前收银员

    let cardId="";


    layui.use(['table','form','layer'], function(){
        let table = layui.table;
        var form = layui.form;
        var $ = layui.jquery, layer = layui.layer;
        let MODULE_PATH = rootPath+"/OrderlistController";

        var time = getNowDate();//获取系统当前时间

        $(document).ready(function(){ //页面第一次加载获取
            var kuang1 = document.getElementById("object").value
            console.log("打印服务项目");
            console.log(kuang1);
            objectList = kuang1.split(",");
            console.log(objectList);

            //获取服务项目,计算应付金额
            $.ajax({
                url: rootPath+'/ProductController/list',
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'get',
                success: function (result) {
                    if (result.code==0) {
                        console.log(result.data);
                        console.log($(objectList).length);
                        let n=0;                       
                        while(n<$(objectList).length){
                            // console.log(objectList[i]);
                            // console.log(result.data[i].productName);
                            var m =0;
                            while(m<$(result.data).length){
                            
                                if (objectList[n]==result.data[m].productName) {
                                    money.push(result.data[m].productPrice);  
                                } 
                                m++;
                                // console.log(money); 
                            }
                            n++;
                        }
                        console.log("应付款");
                        let j=0;
                        
                        while(j<$(money).length){
                            total= money[j] + total;
                            j++;
                            // console.log(money[j]); 
                            // console.log(total); 
                        }
                        console.log("最终应付款");
                        console.log(total); 
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }

            });
            setTimeout(function (){
                // console.log("zhix");
                $("#amount").attr('value',total);
                // $("#payId").attr('value',tex);
                $("#pId").attr('value',tex2);
                $("#time").attr('value',time);
                $("#checker").attr('value',checker);
                $("#state").attr('value',state);
            },300)
            

        })

        form.on('select(way)', function(data){
            console.log("选择会员卡支付");
            if(data.value=="会员卡支付"){

                layer.prompt({
                        formType: 0,
                        value: '',
                        title: '请输入会员卡ID号',
                        btn: ['确定','取消'], //按钮，
                        btnAlign: 'c'
                    }, function(value,index){
                        cardId=value
                        console.log(value);
                        console.log(cardId);  //收集会员卡ID

                        $.ajax({
                            url:  rootPath +"/ViplistController/CheckBalance/"+cardId,
                            dataType: 'json',
                            type: 'get',
                            success: function (result) {
                                console.log("会员卡余额"+result);

                                let re=JSON.stringify(result);                                
                                let o = JSON.parse(re);
                                console.log(o);
                                if (o.code==500) {
                                    layer.msg("卡号不存在，请重新输入！", {icon: 5, time: 2000});
                                    return false;
                                }else if (result<total) {
                                        layer.open({
                                            title: '会员卡余额不足！'
                                            ,content: '卡余额：'+result+" 元， 应付金额："+total+" 元。  余额不足，请换一种支付方式！"
                                        });
                                        layer.close(index); 
                                        return false;
                                }else{
                                     layer.close(index);  
                                }
                            }
                        })             
                    })


            }

         });


        form.on('submit(orderlist-update)', function (data) {
            var formData = data.field;
            console.log('表单对象：', formData);  
            console.log(cardId);

            if(formData.pMethod=="会员卡支付"&&cardId==""){
                layer.msg("选择会员卡支付，请输入会员卡ID！", {icon: 5, time: 2000});
                return false;
            };
            


            let loading = layer.load();
            $.ajax({
                url:  rootPath +"/ViplistController/Recharge",
                data:{
                    id:cardId,
                    count:-formData.acPaid
                },
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'post',
                success: function (result) {
                    if (result.code==200){
                        $.ajax({
                            url: rootPath +'/OrderOController/add',
                            data: data.field,
                            dataType: 'json',
                            contentType: 'application/x-www-form-urlencoded',
                            type: 'post',
                            success: function (result) {
                                if (result.code==200) {
                                        console.log("删除已付款的预约单据");
                                        let loading = layer.load();
                                        $.ajax({
                                            url:  rootPath +"/OrderlistController/remove?ids=" + formData.reserId,
                                            dataType: 'json',
                                            type: 'delete',
                                            success: function (result) {
                                                if (result.code==200) {
                                                    layer.close(loading);
                                                    layer.msg("支付成功！", {icon: 1, time: 1000}, function () {  
                                                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                                                        parent.layui.table.reload("orderlist-table");

                                                    });      
                                                } else {
                                                    layer.msg(result.msg, {icon: 2, time: 1000});
                                                }
                                            }
                                        })                          
                                } else {
                                    layer.msg(result.msg, {icon: 2, time: 5000});
                                }
                            }
                        })

                    } else {
                        layer.msg(result.msg, {icon: 2, time: 5000});
                    }

                }
            })          

            return false;
        });

        $(document).on('click',"#cancel",function(){
                console.log("关闭当前页");
                parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
        });


        //获取当前时间
        function getNowDate() {
            var date = new Date();
            var sign1 = "-";
            var sign2 = ":";
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day  = date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            if (month >= 1 && month <= 9) {
            month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
            day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
            }
            var currentdate = year + sign1 + month + sign1 + day + " " + hour + sign2 + minutes + sign2 + seconds ;
            return currentdate;
        }
    });



</script>

</body>
</html>